<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>计算器</title>
		<style>
			p{
				text-align: center;
				font-size: 33px;
			}
			
			#n1,#n2{
				background-color: gainsboro;
				margin: 8px 40%;
				width: 240px;
				height: 36px;
			}
			#btn1,#btn2,#btn3,#btn4{
				background-color: yellowgreen;
				width: 78px;
				height: 23px;
			}
			div{
				width: 100%;
				height: 120px;
				position: relative;
			}
			#btn1{
				position: absolute;
				top: 33px;
				left: 33%;
			}
			#btn2{
				position: absolute;
				top: 33px;
				left: 60%;
			}
			#btn3{
				position: absolute;
				top: 78px;
				left: 33%;
			}
			#btn4{
				position: absolute;
				top: 78px;
				left: 60%;
			}
		</style>
	</head>
	<body>
		<p><strong>数字1：</strong></p>
		<input type="text" id="n1" />
		<p><strong>数字2：</strong></p>
		<input type="text" id="n2" />
		<br />
		<br />
		<div>
			<input type="button" id="btn1" value="和" onclick="a1()" />
		    <input id="btn2" type="button" value="减" onclick="a2()" />
		    <input id="btn3" type="button" value="积" onclick="a3()" />
		    <input id="btn4" type="button" value="商" onclick="a4()" />
		</div>
		<p id="sum"></p>
		<script>
			function a1(){
				var num1=document.getElementById("n1");
				var num2=document.getElementById("n2");
				var sum=document.getElementById("sum");
				var result=Number(num1.value)+Number(num2.value);
				if(isNaN(result)){
					alert("输入非数字");
				}else{
					sum.innerHTML=result;
				}
			}
			function a2(){
				var num1=document.getElementById("n1");
				var num2=document.getElementById('n2');
				var sum=document.getElementById('sum');
				var result=Number(num1.value)-Number(num2.value);
				if(isNaN(result)){
					alert("输入非数字");
				}else{
					sum.innerHTML=result;
				}
			}
			function a3(){
				var num1=document.getElementById("n1");
				var num2=document.getElementById('n2');
				var sum=document.getElementById('sum');
				var result=Number(num1.value)*Number(num2.value);
				if(isNaN(result)){
					alert("输入非数字");
				}else{
					sum.innerHTML=result;
				}
			}
			function a4(){
				var num1=document.getElementById("n1");
				var num2=document.getElementById('n2');
				var sum=document.getElementById('sum');
				var result=Number(num1.value)/Number(num2.value);
				if(isNaN(result)||num2.value==0){
					alert("输入非数字,或除数为0");
				}else{
					sum.innerHTML=result;
				}
			}
		</script>
	</body>
</html>
